<template>
  <div>
    <goga-header title="充值">
      <div slot="left">
        <span @click="goBack">
          <icon symbol="back"> </icon>
        </span>
      </div>
    </goga-header>
    <div class="management">
      <div class="price">
        ￥{{getBlance}}
      </div>
      <div class="mini-tit">用户余额</div>
      <div class="menu">
        <div  @click="link({name:'deposit'})">
          <cell title="充值" is-link>
            <icon symbol="right"> </icon>
          </cell>
        </div>

        <div @click="link({name:'record'})">
          <cell title="交易记录" is-link>
            <icon symbol="right"> </icon>
          </cell>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="babel">
  import {mapGetters} from 'vuex'
  import gogaHeader from '@components/goga-header'
  import Icon from '@components/icon'
  import Cell from '@components/cell'

  const fetchBlance =async function (store) {
    store.dispatch('backend/management/getBalance')
  }
  export default {
    components: {
      gogaHeader,
      Icon,
      Cell
    },
    data() {
      return {
        balance: 0
      }
    },
    computed: {
      ...mapGetters({
        isLogin: 'global/user/isLogin',
        getBlance: 'backend/management/getBalance'
      })
    },
    async mounted() {
      if(this.getBlance == 0) {
        fetchBlance(this.$store)
      }
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      link (route) {
        this.$router.push(route)
      }
    }
  }
</script>
<style lang="less">
  @import "index.less";
</style>
